<template>
    <div id="page">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="pageParams.currentPage" 
            :page-sizes="pageParams.pageSizes" 
            :page-size="pageParams.pageSize"
            layout="prev, pager, next, jumper" 
            next-text="下一页"
            prev-text="上一页"
            :total="pageParams.total">
        </el-pagination>
    </div>
</template>

<script>
export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name: 'page',
    data() {
        return {
            pageParams: {
                currentPage: 1,
                pageSizes: [10, 20, 50, 100],
                pageSize: 10,
                total: 520
            }
        }
    },
    methods: {
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        }
    }
}
</script>

<style lang="less" scoped>
#page {
    text-align: center;
    margin-top: 10px;

    /*页码样式*/
    /deep/ .el-pagination {
        color: #080808;
        font-weight: normal;
    }

    /*当前页样式*/
    /deep/ .el-pagination .el-pager li:not(.disabled).active {
        background-color: #439481;
        color: #f3bb03;
        cursor: pointer;
        border-radius: 3px;
    }

    /*当前页hover样式*/
    /deep/ .el-pagination .el-pager li:not(.disabled).active:hover {
        background-color: #439481;
        color: #f3bb03;
        border: 0;
    }

    /*不是当前页其他页码hover样式*/
    /deep/ .el-pagination .el-pager li:not(.disabled):hover {
        color: #333;
        border-color: #e5242b;
    }
}
</style>
